<!--
 * @Description: 修改密码组件
 * @Author: laufing
 * @Date: 2020-02-19 20:55:17
 * @LastEditors: laufing
 * @LastEditTime: 2020-03-01 15:34:08
 -->
<template>
  <div id="updatePw">
    <el-dialog title="修改密码" width="300px" center :visible.sync="isUpdatePw">
      <el-form :model="LoginUser" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">

        <el-form-item prop="originPw">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="原始密码" v-model="LoginUser.originPw"></el-input>
        </el-form-item>
        <el-form-item prop="newPw">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="新密码" v-model="LoginUser.newPw"></el-input>
        </el-form-item>
        <el-form-item prop="confirmNewPw">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="确认密码"
            v-model="LoginUser.confirmNewPw"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="updatePassword" style="width: 100%">修改密码
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import { mapActions } from "vuex";

export default {
  // 登录组件
  name: "UpdatePw",
  data() {

    return {
      LoginUser: {
        originPw: "",
        newPw: "",
        confirmNewPw: "",
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
      },
    };
  },
  computed: {
    // 控制更新密码组件是否显示
    isUpdatePw: {
      get() {
        return this.$store.getters.getUpdatePw;
      },
      set(val) {
        this.$refs["ruleForm"].resetFields();
        this.setUpdatePw(val);
      },
    },
  },
  methods: {
    //将store中的actions方法映射到methods
    ...mapActions(["setUser", "setUpdatePw"]),

    // 点击修改密码触发
    updatePassword() {
      this.$axios.put("user/info/password/", {
        o_password: this.LoginUser.originPw,
        pwd: this.LoginUser.newPw,
        pwd2: this.LoginUser.confirmNewPw,
      }, {
        headers: {
          token: localStorage.getItem("token") || ""
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.notifySucceed(res.data.msg)
          this.isUpdatePw = false
          localStorage.clear()  // 清除本地存储中的数据
          this.setUser("")  // 清除vuex中的数据
          this.$router.push("/")
        } else {
          this.notifyError(res.data.msg)
        }
      })
    },
  },
};
</script>


<style></style>
